<template>
  <div @mouseout.self="usePlayerStore().showVolume=false"
       class="bg-primary text-base-100 h-12 flex justify-center items-center rounded-t-full">
    <div class="flex  w-8/12 justify-center items-center">
      <div class="w-2/6"></div>
      <div @click="toSongInfo()"
           :class="['absolute -left-20  -mt-8 flex justify-center items-center scale-[30%]']">
        <div class=" outline-gray-500/10 outline-8 outline
                    border-4 rounded-full overflow-clip
                    bg-black flex justify-center items-center">
          <div class=" border border-white/20
              h-[245px] w-[245px] rounded-full flex justify-center items-center">
            <div class=" border border-white/20
              h-[240px] w-[240px] rounded-full flex justify-center items-center">
              <div class=" border border-white/20
              h-[235px] w-[235px] rounded-full flex justify-center items-center">
                <div class=" border border-white/20
              h-[230px] w-[230px] rounded-full flex justify-center items-center">
                  <div class=" border border-white/20
              h-[225px] w-[225px] rounded-full flex justify-center items-center">
                    <div class=" border border-white/20
              h-[220px] w-[220px] rounded-full flex justify-center items-center">
                      <div class=" border border-white/20
              h-[215px] w-[215px] rounded-full flex justify-center items-center">
                        <div class=" border border-white/20
              h-[210px] w-[210px] rounded-full flex justify-center items-center">
                          <div class=" border border-white/20
              h-[205px] w-[205px] rounded-full flex justify-center items-center">
                            <div class=" border border-white/20
              h-[200px] w-[200px] rounded-full flex justify-center items-center">
                              <div class=" border border-white/20
              h-[195px] w-[195px] rounded-full flex justify-center items-center">

                                <div class=" glass bg-clip-text
              h-[190px] w-[190px] rounded-full overflow-clip flex justify-center items-center">

                                  <div :class="[{'animate-spin':usePlayerStore().isPlaying},
                                      'bg-gradient-to-br from-primary via-secondary to-accent absolute -z-10',
                                       'h-40 w-40 rounded-full overflow-clip bg-base-100 shadow-2xl flex justify-center items-center']">
                                  </div>

                                  <div
                                      :class="[{'animate-pulse':usePlayerStore().isPlaying},'my-button h-[155px] w-[155px] rounded-full overflow-clip flex justify-center items-center']">
                                    <svg class="w-full h-4/5 text-white/10"
                                         xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                                         stroke-width="1.5"
                                         stroke="currentColor">
                                      <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z"/>
                                    </svg>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <p class="w-3/6 flex justify-start items-center font-bold truncate">
        {{
          usePlayerStore()?.playerList[usePlayerStore().currentIndex]?.['name']
        }}
      </p>
    </div>
    <div class="md:flex hidden w-4/12 justify-center items-center">
      <div @click="usePlayerStore().afterSound()"
           class=" w-1/4 flex justify-center items-center ">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-4 h-4 md:w-6 md:h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M18.75 19.5l-7.5-7.5 7.5-7.5m-6 15L5.25 12l7.5-7.5"/>
        </svg>
      </div>
      <div @click="usePlayerStore().togglePlayPause()"
           class=" w-1/4 flex justify-center items-center ">
        <svg v-if="!usePlayerStore().isPlaying"
             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-4 h-4 md:w-6 md:h-6">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/>
        </svg>
        <svg v-else
             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-4 h-4 md:w-6 md:h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5"/>
        </svg>
      </div>
      <div @click="usePlayerStore().nextSound()"
           class=" w-1/4 flex justify-center items-center ">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-4 h-4 md:w-6 md:h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
        </svg>
      </div>
      <div class=" w-1/4 flex justify-end items-center text-xs pr-2">
        {{ hook_formatTime(usePlayerStore().currentTime) }}
      </div>
    </div>
    <div class="w-5/12 md:flex hidden justify-center items-center">
      <input id="seekBar_SoundPlayer"
             @change="seekSound()"
             v-model="usePlayerStore().currentTime"
             @mousedown="usePlayerStore().isSeekChange=true"
             @mouseup="usePlayerStore().isSeekChange=false"
             type="range" min="0"
             :max="usePlayerStore().duration"
             step="0.01"
             class="range range-xs range-secondary "/>
    </div>
    <div class="w-5/12 flex justify-center items-center">
      <div class=" w-1/4 md:flex  hidden  justify-start items-center text-xs pl-2">
        {{ hook_formatTime(usePlayerStore().duration) }}
      </div>
      <div class=" w-1/4 md:w-1/4 flex justify-center items-center ">
        <!-- 音量控制 -->

        <input :class="[ { 'md:flex' : usePlayerStore().showVolume },
          'hidden',
        'w-24 absolute top-[-50px] range range-primary range-xs transform -rotate-90'
        ]"
               v-model="usePlayerStore().volume"
               @mouseout="usePlayerStore().showVolume=false"
               @mouseover="usePlayerStore().showVolume=true"
               max="100"
               min="0"
               type="range">

        <svg v-if="usePlayerStore().volume > 0"
             @click="usePlayerStore().volume = 0"
             class="w-4 h-4 md:w-6 md:h-6"
             @mouseover="usePlayerStore().showVolume = true"
             xmlns="http://www.w3.org/2000/svg"
             fill="none"
             viewBox="0 0 24 24"
             stroke-width="1.5"
             stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M19.114 5.636a9 9 0 010 12.728M16.463 8.288a5.25 5.25 0 010 7.424M6.75 8.25l4.72-4.72a.75.75 0 011.28.53v15.88a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.507-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.396C2.806 8.756 3.63 8.25 4.51 8.25H6.75z"/>
        </svg>

        <svg v-else
             @click="usePlayerStore().volume = 50"
             @mouseover="usePlayerStore().showVolume = true"
             xmlns="http://www.w3.org/2000/svg"
             fill="none" viewBox="0 0 24 24"
             stroke-width="1.5" stroke="currentColor"
             class="w-4 h-4 md:w-6 md:h-6">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M17.25 9.75L19.5 12m0 0l2.25 2.25M19.5 12l2.25-2.25M19.5 12l-2.25 2.25m-10.5-6l4.72-4.72a.75.75 0 011.28.531V19.94a.75.75 0 01-1.28.53l-4.72-4.72H4.51c-.88 0-1.704-.506-1.938-1.354A9.01 9.01 0 012.25 12c0-.83.112-1.633.322-2.395C2.806 8.757 3.63 8.25 4.51 8.25H6.75z"/>
        </svg>

      </div>
      <div @click="usePlayerStore().togglePlayPause()"
           class=" w-1/6 flex md:hidden justify-center items-center ">
        <svg v-if="!usePlayerStore().isPlaying"
             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-4 h-4 md:w-6 md:h-6">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/>
        </svg>
        <svg v-else
             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-4 h-4 md:w-6 md:h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25v13.5m-7.5-13.5v13.5"/>
        </svg>
      </div>
      <div class=" w-1/4 flex  justify-center items-center text-xs pl-2">
        <svg v-if="playStatus == 0"
             @click="playStatus=1"
             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-4 h-4 md:w-6 md:h-6">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"/>
        </svg>

        <svg v-else-if="playStatus == 1"
             @click="playStatus = 0"
             class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1"
             stroke="currentColor">
          <path
              d="M21.67 3.955l-2.825-2.202.665-.753 4.478 3.497-4.474 3.503-.665-.753 2.942-2.292h-4.162c-3.547.043-5.202 3.405-6.913 7.023 1.711 3.617 3.366 6.979 6.913 7.022h4.099l-2.883-2.247.665-.753 4.478 3.497-4.474 3.503-.665-.753 2.884-2.247h-4.11c-3.896-.048-5.784-3.369-7.461-6.858-1.687 3.51-3.592 6.842-7.539 6.858h-2.623v-1h2.621c3.6-.014 5.268-3.387 6.988-7.022-1.72-3.636-3.388-7.009-6.988-7.023h-2.621v-1h2.623c3.947.016 5.852 3.348 7.539 6.858 1.677-3.489 3.565-6.81 7.461-6.858h4.047z"/>
        </svg>

      </div>

      <div @click.self="usePlayerStore().showPlayerList=!usePlayerStore().showPlayerList"
           :class="[ { 'hidden':usePlayerStore().showPlayerList }, 'absolute left-0 bottom-0 bg-black/70 w-[100vw] h-[100vh] flex justify-center items-end ']">

        <player-list class="absolute bottom-16 md:right-12" :player-list="usePlayerStore().playerList"
                     @updatePlayerList="usePlayerStore().updatePlayerList()"></player-list>
      </div>
      <div @click="usePlayerStore().showPlayerList=!usePlayerStore().showPlayerList"
           class=" w-1/4 flex justify-center items-center">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-4 h-4 md:w-6 md:h-6">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25"/>
        </svg>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import {onBeforeUnmount, onMounted, ref, watch} from "vue";
import PlayerList from "./PlayerList.vue";
import {hook_formatTime, usePlayerStore} from "../hook/SongPlayerHook.ts";
import router from "../plugins/router.ts";


let playStatus = ref(0)

watch(() => usePlayerStore().currentIndex, () => {
  if (playStatus.value == 1) {
    //设置随机值
    let index = Math.floor(Math.random() * (usePlayerStore().playerList?.length));
    usePlayerStore().indexSound(index)
  }
})


//启动列表监听
usePlayerStore().setPlayerListUpdateInterval()

//Watchers
watch(() => usePlayerStore().volume, (value) => {
  usePlayerStore().sound?.volume(value / 100)
})

// watch(() => usePlayerStore().playerList, (value) => {
//   if (value.length == 0) {
//     usePlayerStore().currentIndex = 0
//   }
// })

//Computed


// Lifecycle Hooks
onBeforeUnmount(() => {
  if (usePlayerStore().sound) {
    usePlayerStore().sound.unload()
  }
  if (usePlayerStore().playerListUpdateInterval) {
    clearInterval(usePlayerStore().playerListUpdateInterval)
    usePlayerStore().playerListUpdateInterval = null
  }
})
//1.首先一加载这个组件时：读取歌曲列表数据
onMounted(() => {
  usePlayerStore().updatePlayerList()
})

//修改seek
function seekSound() {
  usePlayerStore().seekSound($('#seekBar_SoundPlayer').prop('value'))
}
function toSongInfo() {
  //确认列表有歌曲的情况下跳转，否则不跳转
  let playerStore = usePlayerStore();
  if (playerStore.playerList?.length != 0) {
    router.push('/songInfo/' + playerStore.playerList[playerStore.currentIndex]?.id);
  }
}


</script>

<style scoped>

</style>